<!--  -->
<template>
  <div class="app">
    <div class="flex mb-30">
      <div class="btn-back" @click="routerGoTo('MemberDetail')">
        <i class="el-icon-back"></i> 返回
      </div>
      <div class="line"></div>
      <div class="name">积分变动</div>
    </div>

    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item prop="num">
          <span slot="label">
            变动额度<i class="el-icon-question" style="margin-left: 5px"></i>
          </span>
          <el-input v-model="ruleForm.num" style="width:200px"></el-input>
        </el-form-item>

        <el-form-item prop="textarea">
          <span slot="label"> 变动说明 </span>
          <el-input type="textarea" :rows="2"  placeholder="请输入内容" v-model="ruleForm.textarea" style="width:300px">
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <el-button type="primary" @click="addUser">确认</el-button>
      <el-button @click="routerGoTo('MemberDetail')">取消</el-button>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      ruleForm: {
        num: "",
        textare:"",
      },
      rules: {
        num: [{ required: true, message: "请输入变动额度", trigger: "blur" }],
        textarea: [{ required: true, message: "请输入变动说明", trigger: "blur" }],
      }
    };
  },
  computed: {},
  watch: {},
  methods: {

    routerGoTo(val) {
      this.$router.push({
        name: val,
      });
    },
    addUser() {
      let flag = false;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          return this.$message("信息不完整");
        }
      });
      if (flag) {
        this.$request
          .post(`/member/credit1/change`, {
            credit1: this.ruleForm.num,
            remark:this.ruleForm.textare,
            user_id:this.$route.params.id
          })
          .then((res) => {
            if (res.status == 0) {
              this.$message("添加成功!");
              this.routerGoTo('MemberDetail')
            } else {
              this.$message("添加失败!");
            }

            // console.log(res);
          })
          .catch((err) => {

          });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  padding: 30px;
  background-color: white;
  .btn-back {
    &:hover {
      color: #3ca7fa;
      cursor: pointer;
    }
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .line {
    width: 1px;
    height: 14px;
    background-color: #d8d8d8;
    margin-right: 15px;
    margin-left: 15px;
  }
  .flex {
    width: 100%;
    display: flex;
  }
  .flex-spaceCenter {
    justify-content: center;
  }
  .flex-spaceBetween {
    justify-content: space-between;
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    padding: 20px;
  }
}
</style>
